import React, { useState } from 'react';
import { InputNumber, Button } from 'antd';

const TableComponment = () => {
  const [min, setMin] = useState(1)
  const [max, setMax] = useState(20)
  const [row, setRow] = useState(5)
  const [col, setCol] = useState(8)
  const [rowTemp, setRowTemp] = useState([])
  const [colTemp, setColTemp] = useState([])

  const handleChange = (type, e) => {
    type === 'row' ? setRow(e) : setCol(e)
  }
  const generateUniqueKey = () => {
    const key = 'key_';
    const time = Date.now().toString(36);
    const random = Math.random().toString(36).substr(2, 9);
    return key + time + random;
  }
  const fillKey = num => Array(num).fill(0).map(() => generateUniqueKey())

  const generate = () => {
    setColTemp(fillKey(col))
    setRowTemp(fillKey(row))
  }
  return (
    <>
      row:
      <InputNumber value={row} max={max} min={min}
        onChange={(e) => {
          handleChange('row', e);
        }} />
      col:
      <InputNumber value={col} max={max} min={min}
        onChange={(e) => {
          handleChange('col', e);
        }} />

      <Button type="primary" onClick={() => generate()}>Generate</Button>

      {rowTemp.map(row => {
        return (
          <div key={row}>
            {
              colTemp.map(col => {
                return (
                  <div
                    key={col}
                    style={{
                      display: 'inline-block',
                      width: "20px",
                      height: "20px",
                      border: "1px solid"
                    }}>
                  </div>
                )
              })
            }
          </div >
        )
      })}
    </>
  )
}
export default TableComponment;
